<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>产品创建页面</title>

    <!--可选，字体-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ 必须的 ]-->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <!--Nifty Stylesheet [ 必须的 ]-->
    <link href="../../../css/nifty.min.css" rel="stylesheet">
    <!--Nifty Premium Icon [ demo用到的icon css ]-->
    <link href="../../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <!--=================================================-->
    <!--Pace - 页面加载进度条 [可选]-->
    <link href="../../../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../../plugins/pace/pace.min.js"></script>
    <!--Demo [ demo用到的css ]-->
    <link href="../../../css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--alex2:Bootstrap Select [ 下拉框 ]-->
    <link href="../../../plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <!--Themify Icons [ 图标样式 ]-->
    <link href="../../../plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <navbar></navbar>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div class="panel">
                    <div class="panel-body">
                        <div class="panel panel-body">
                            <h4 class="pad-btm bord-btm"><i class="demo-pli-male-female icon-fw v-middle"></i> 产品信息</h4>
                            <div class="pad-all">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="control-label">产品名称</label>
                                        <input type="email" class="form-control" v-model="productInfo.name">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">产品代号</label>
                                        <input type="email" class="form-control" v-model="productInfo.codeName">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">终端类型</label>
                                        <div class="checkbox">
                                            <input id="demo-form-checkbox" class="magic-checkbox" type="checkbox" checked="" value="1" v-model="productInfoTerminalIntTypes">
                                            <label for="demo-form-checkbox">PC 端</label>
                                        </div>
                                        <div class="checkbox">
                                            <input id="demo-form-checkbox-2" class="magic-checkbox" type="checkbox" value="2" v-model="productInfoTerminalIntTypes">
                                            <label for="demo-form-checkbox-2">APP 端</label>
                                        </div>
                                        <div class="checkbox">
                                            <input id="demo-form-checkbox-3" class="magic-checkbox" type="checkbox" value="3" v-model="productInfoTerminalIntTypes">
                                            <label for="demo-form-checkbox-3">其他</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">行业类型</label>
                                        <!-- Radio Buttons -->
                                        <div class="radio">
                                            <input id="demo-form-radio" class="magic-radio" type="radio" name="form-radio-button" checked="" value="1" v-model="productInfo.dicIndustryId">
                                            <label for="demo-form-radio">教育</label>
                                        </div>
                                        <div class="radio">
                                            <input id="demo-form-radio-2" class="magic-radio" type="radio" name="form-radio-button" value="2" v-model="productInfo.dicIndustryId">
                                            <label for="demo-form-radio-2">金融</label>
                                        </div>
                                        <div class="radio">
                                            <input id="demo-form-radio-3" class="magic-radio" type="radio" name="form-radio-button" value="3" v-model="productInfo.dicIndustryId">
                                            <label for="demo-form-radio-3">医疗</label>
                                        </div>
                                        <div class="radio">
                                            <input id="demo-form-radio-4" class="magic-radio" type="radio" name="form-radio-button" value="4" v-model="productInfo.dicIndustryId">
                                            <label for="demo-form-radio-4">其他</label>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <div>
                                            <label class="control-label">产品类型</label>
                                        </div>
                                        <select class="selectpicker" v-model="productInfo.dicProductInfoTypeId">
                                            <option value="1">教育</option>
                                            <option value="2">金融</option>
                                            <option value="3">医疗</option>
                                            <option value="4">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">产品介绍</label>
                                        <textarea id="demo-textarea-input" rows="9" class="form-control"
                                                  placeholder="Your content here.." v-model="productInfo.des"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group pull-right">
                            <button type="button" class="btn btn-info" @click="save4Draft()">存为草稿</button>
                            <button type="button" class="btn btn-info" @click="save4Approval()">提交审核</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->

        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <mainnav></mainnav>

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pad-rgt pull-right">
            You have <a href="#" class="text-main"><span class="badge badge-danger">3</span> pending action.</a>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt">
            14GB of <strong>512GB</strong> Free.
        </div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2018 Your Company</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->


<!--JAVASCRIPT-->
<!--jQuery [ 必须的 ]-->
<script src="../../../js/jquery.min.js"></script>
<!--BootstrapJS [ 必须的 ]-->
<script src="../../../js/bootstrap.min.js"></script>
<!--NiftyJS [ 必须 ]-->
<script src="../../../js/nifty.min.js"></script>
<!--=================================================-->
<!--Demo script [ demo示例使用 ]-->
<script src="../../../js/demo/nifty-demo.min.js"></script>

<!--alex2:Bootstrap Select [ 下拉框 ]-->
<script src="../../../plugins/bootstrap-select/bootstrap-select.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--组件导航条-->
<script src="../../../js/component/header.js"></script>
<!--组件导航栏-->
<script src="../../../js/component/mainnav.js"></script>
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    var app =new Vue({
        el:"#container",
        data:{
            //多选框
            productInfoTerminalIntTypes:[],
            //后台的数据结构
            productInfo:{
                productInfoTerminalTypes:[]
            }
        },
        methods:{
            save4Draft(){
                //处理参数
                //将productInfoTerminalIntTypes[1,2]的数据处理成productInfo.productInfoTerminalTypes:[{type:"1"},{type:"2"}]
                //1:先循环数组
                var self = this;
                for(productInfoTerminalIntType of self.productInfoTerminalIntTypes){
                    let productInfoTerminalType= {};
                    productInfoTerminalType.type=productInfoTerminalIntType;
                    //放入数组
                    self.productInfo.productInfoTerminalTypes.push(productInfoTerminalType);
                }
                axios.post("http://127.0.0.1:8080/project/product-info/save4Draft",self.productInfo).then(res=>{
                    alert("产品信息存为草稿成功!");
                    location.href="product-info-list.html";
                })
            },
            save4Approval(){
                var self = this;
                for(productInfoTerminalIntType of self.productInfoTerminalIntTypes){
                    alert(productInfoTerminalIntType);
                    let productInfoTerminalType= {};
                    productInfoTerminalType.type=productInfoTerminalIntType;
                    //放入数组
                    self.productInfo.productInfoTerminalTypes.push(productInfoTerminalType);
                }
                axios.post("http://127.0.0.1:8080/project/product-info/save4Approval",self.productInfo).then(res=>{
                    alert("产品信息创建并提交审核成功!");
                    location.href="product-info-list.html";
                })
            }
        },
        created(){

        }

    })
</script>
</body>
</html>
